<template>
  <v-chart ref="chart" class="chart" :option="option" />
</template>

<script>
export default {
  name: 'StaggerChart',
  props: ['rData'],
  data() {
    return {
      color: ['#007AFF', '#00DE0D'],
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['年龄', '当选院士年龄']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value'
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            data: ['30岁以上', '40岁以上', '50岁以上', '60岁以上', '70岁以上', '80岁以上']
          }
        ],
        series: [
          {
            name: '年龄',
            type: 'bar',
            data: [10, 40, 50, 30, 60, 50],
            itemStyle: {
              color: '#007AFF'
            }
          },
          {
            name: '当选院士年龄',
            type: 'bar',
            data: [10, 40, 50, 35, 65, 40],
            itemStyle: {
              color: '#00DE0D'
            }
          }
        ]
      }
    }
  },
  methods: {
    resize() {
      this.$refs['chart'].resize()
    }
  }
}
</script>

<style>

</style>
